{% load static %}

<!DOCTYPE html>

<html lang="en">

<head>
    <title>{% block title %}Default Title{% endblock %}</title>

    <!-- CSS only -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/fas-all.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/tram.css' %}">
    <link rel="stylesheet" href="{% static 'css/select2.min.css' %}">

    <script type="text/javascript">
        const CSRF_TOKEN = "{{ csrf_token }}";
    </script>

    <!-- JS, Popper.js, and jQuery -->
    <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/select2.min.js' %}"></script>
    <script src="{% static 'js/base.js' %}"></script>

    <link rel="icon" href="{% static 'img/favicon-32x32.png' %}">
    <meta name="theme-color" content="#7952b3">
    <meta charset="utf-8">
    {% block head %} {% endblock %}
</head>

<body>
    <header class="navbar  navbar-fixed-top navbar-expand-md">
        <nav class="container-xxl d-flex justify-content-between">
            <h1 style="color: white">
                <img src="{% static 'img/me_300x300.jpeg' %}" alt="TRAM - Threat Report ATT&amp;CK Mapper">
                TRAM
            </h1>
            <ul class="navbar-nav d-flex m-0">
                <li class="navbar-item me-1">
                    {% block back-to-index-link %}
                    <a class="btn btn btn-outline-light" href="/">Reports</a>
                    {% endblock %}
                </li>
                <li class="navbar-item me-1">
                    <a class="btn btn btn-outline-light" href="/ml">ML Admin</a>
                </li>
                <li class="navbar-item me-1">
                    <form id="id-upload-form">
                        {% csrf_token %}
                        <label for="id-upload" class="btn btn btn-outline-light"
                            title="Upload File (valid: .pdf, .docx, .html, .json, .txt)">
                            <span class="px-1">Upload Report</span>
                            <em class="fas fa-upload"></em>
                        </label>
                        <input type="file" id="id-upload" style="display: none; height: max-content;"
                            accept=".pdf,.docx,.html,.json,.txt">
                    </form>
                </li>
                <li class="navbar-item me-1">
                    <a class="btn-danger btn" href="/logout">Logout</a>
                </li>
            </ul>
        </nav>
    </header>
    <div class="container-xxl text-center" style="margin-bottom: 60px">
        {% block body %}
        {% endblock %}
    </div>
    <footer class="footer fixed-bottom bg-light container row">
        <div class="container row text-muted">
            <div class="col text-start">
                <a href="/admin/">Admin</a> |
                <a href="/docs/">Docs</a> |
                <a href="https://github.com/center-for-threat-informed-defense/tram/">GitHub</a>
            </div>
            <div class="col text-end">
                &copy; 2021 MITRE Engenuity. All rights reserved.
            </div>
        </div>
    </footer>
</body>

</html>
